<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <label class="el-form-item-label">患者名称</label>
        <el-input v-model="query.name" clearable placeholder="患者名称" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">性别</label>
        <el-select
          v-model="query.sex"
          clearable
          size="small"
          placeholder="性别"
          class="filter-item"
          style="width: 90px"
          @change="crud.toQuery"
        >
          <el-option
            v-for="item in sex_options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <label class="el-form-item-label">电话</label>
        <el-input v-model="query.phone" clearable placeholder="电话" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">年龄</label>
        <el-input v-model="query.age" clearable placeholder="年龄" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <rrOperation :crud="crud">
          <el-button slot="right" class="filter-item" type="primary" size="mini" @click="handleClick">高级搜索</el-button>
        </rrOperation>
      </div>
      <transfer v-show="show" />
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />
      <!--表单组件-->
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
          <!-- <el-form-item label="ID">
            <el-input v-model="form.id" style="width: 370px;" />
          </el-form-item> -->
          <el-form-item label="患者名称" prop="name">
            <el-input v-model="form.name" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="userSex" placeholder="请选择">
              <el-option
                v-for="item in sex_options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="form.phone" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="form.age" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="体力劳动等级">
            <el-select v-model="userLevel" placeholder="请选择">
              <el-option
                v-for="item in level_options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="民族">
            <el-select v-model="form.nation" placeholder="请选择民族">
              <el-option label="汉族" value="1" />
              <el-option label="其他" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="教育程度">
            <el-select v-model="form.educationBackground" placeholder="请选择">
              <el-option
                v-for="item in educationBackground_options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="是否结婚">
            <el-select v-model="userMarry" placeholder="请选择">
              <el-option
                v-for="item in marry_options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="生育情况">
            <el-select v-model="form.fertility" placeholder="请选择">
              <el-option
                v-for="item in fertility_options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="职业">
            <el-input v-model="form.profession" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="首诊医院">
            <el-input v-model="form.firstHospital" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="首诊科室">
            <el-input v-model="form.firstOffice" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="是否抽血">
            <el-select v-model="userDrawBlood" placeholder="请选择">
              <el-option
                v-for="item in drawBlood_options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="入组时间">
            <el-date-picker v-model="form.joinTime" type="date" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="联系人">
            <el-input v-model="form.contacts" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="form.phone2" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="联系电话1">
            <el-input v-model="form.phone1" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="出生日期">
            <el-date-picker v-model="form.birth" type="date" style="width: 370px;" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler" @cell-mouse-enter="onCellMouseEnter">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="ID" />
        <el-table-column prop="name" label="患者名称" sortable>
          <template #default="scope">
            <app-link :to="to">
              <el-link type="primary">{{ scope.row.name }}</el-link>
            </app-link>
          </template>
        </el-table-column>
        <el-table-column prop="sex" label="性别" :formatter="sex_formatter" />
        <el-table-column prop="age" label="年龄" sortable />
        <el-table-column prop="joinTime" label="入组时间" sortable />
        <el-table-column prop="percentage" label="病例完整度" sortable />
        <el-table-column v-if="checkPer(['admin','patient:edit','patient:del'])" label="操作" width="150px" align="center">
          <template slot-scope="scope">
            <udOperation
              :data="scope.row"
              :permission="permission"
            />
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import crudPatient from '@/api/patient'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import AppLink from '@/layout/components/Sidebar/Link'
import { regionData } from 'element-china-area-data'// npm install element-china-area-data -S https://www.npmjs.com/package/element-china-area-data
import Transfer from '@/views/components/Transfer'
import { mapMutations, mapState } from 'vuex'

const defaultForm = {
  id: null,
  name: null,
  sex: null,
  phone: null,
  age: null,
  level: null,
  nation: null,
  educationBackground: null,
  marry: null,
  fertility: null,
  profession: null,
  firstHospital: null,
  firstOffice: null,
  drawBlood: null,
  joinTime: null,
  contacts: null,
  phone2: null,
  phone1: null,
  province: null,
  city: null,
  area: null,
  province2: null,
  city2: null,
  area2: null,
  birth: null,
  money: null,
  percentage: null
}
export default {
  name: 'Patient',
  components: {
    pagination,
    crudOperation,
    rrOperation,
    udOperation,
    // DateRangePicker,
    AppLink,
    Transfer
  },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({ title: '患者', url: 'api/patient', idField: 'id', sort: 'id,desc', crudMethod: { ...crudPatient }})
  },
  data() {
    return {
      permission: {
        add: ['admin', 'patient:add'],
        edit: ['admin', 'patient:edit'],
        del: ['admin', 'patient:del']
      },
      to: '',
      rules: {
        name: [
          { required: true, message: '患者名称不能为空', trigger: 'blur' }
        ]
      },
      queryTypeOptions: [
        { key: 'name', display_name: '患者名称' },
        { key: 'sex', display_name: '性别' },
        { key: 'phone', display_name: '电话' },
        { key: 'age', display_name: '年龄' },
        { key: 'level', display_name: '体力劳动等级' },
        { key: 'nation', display_name: '民族' },
        { key: 'educationBackground', display_name: '教育程度' },
        { key: 'marry', display_name: '是否结婚' },
        { key: 'fertility', display_name: '生育情况' },
        { key: 'firstHospital', display_name: '首诊医院' },
        { key: 'firstOffice', display_name: '首诊科室' },
        { key: 'drawBlood', display_name: '是否抽血' }
      ],
      sex_options: [
        {
          value: '1',
          label: '男'
        }, {
          value: '2',
          label: '女'
        }
      ],
      marry_options: [
        {
          value: '1',
          label: '已婚'
        }, {
          value: '2',
          label: '未婚'
        }
      ],
      level_options: [
        {
          value: '1',
          label: 'I'
        }, {
          value: '2',
          label: 'II'
        }, {
          value: '3',
          label: 'III'
        }, {
          value: '4',
          label: 'IV'
        }
      ],
      fertility_options: [
        {
          value: '2',
          label: '未生育'
        }, {
          value: '1',
          label: '已生育'
        }
      ],
      educationBackground_options: [
        {
          value: '小学',
          label: '小学'
        }, {
          value: '初中',
          label: '初中'
        }, {
          value: '高中',
          label: '高中'
        }, {
          value: '大专',
          label: '大专'
        },
        {
          value: '大学及以上',
          label: '大学及以上'
        }, {
          value: '其他',
          label: '其他'
        }
      ],
      drawBlood_options: [
        {
          value: '1',
          label: '已抽血'
        }, {
          value: '2',
          label: '未抽血'
        }
      ],
      money_options: [
        {
          value: '1',
          label: '10000以内'
        }, {
          value: '2',
          label: '10000-30000'
        }, {
          value: '3',
          label: '30000-80000'
        }, {
          value: '4',
          label: '80000-150000'
        }, {
          value: '5',
          label: '150000-300000'
        }, {
          value: '6',
          label: '300000以上'
        }
      ],
      userSex: '',
      userLevel: '',
      userMarry: '',
      userDrawBlood: '',
      areaSelectData: regionData, // options绑定的数据就是引入的 provinceAndCityData
      areaSelectData1: regionData, // options绑定的数据就是引入的 provinceAndCityData
      selectedOptions: [], // 地区选择参数，['省区域码', '市区域码']
      selectedOptions1: [], // 地区选择参数，['省区域码', '市区域码']
      money: '',
      show: false
    }
  },
  computed: {
    ...mapState(
      {
        count: state => state.patient.count
      }
    )
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    // 新增前将多选的值设置为空
    [CRUD.HOOK.beforeToAdd]() {
      this.userSex = ''
      this.userLevel = ''
      this.userMarry = ''
      this.userDrawBlood = ''
    },
    // 初始化编辑时候的性别
    [CRUD.HOOK.beforeToEdit](crud, form) {
      this.userSex = this.sex_formatter(null, null, form.sex, null)
      this.userLevel = this.level_formatter(null, null, form.level, null)
      this.userMarry = this.marry_formatter(null, null, form.marry, null)
      this.userDrawBlood = this.drawBlood_formatter(null, null, form.drawBlood, null)
    },
    // 提交前做的操作
    [CRUD.HOOK.afterValidateCU](crud) {
      crud.form.sex = this.sex_convert(this.userSex)
      crud.form.level = this.level_convert(this.userLevel)
      crud.form.drawBlood = this.drawBlood_convert(this.userDrawBlood)
      crud.form.marry = this.marry_convert(this.userMarry)
      return true
    },
    sex_formatter: function(row, column, cellValue, index) {
      if (cellValue === 1) {
        return '男'
      } else {
        return '女'
      }
    },
    level_formatter: function(row, column, cellValue, index) {
      if (cellValue === 1) {
        return 'I'
      } else if (cellValue === 2) {
        return 'II'
      } else if (cellValue === 3) {
        return 'III'
      } else {
        return 'IV'
      }
    },
    marry_formatter: function(row, column, cellValue, index) {
      if (cellValue === 1) {
        return '已婚'
      } else {
        return '未婚'
      }
    },
    drawBlood_formatter: function(row, column, cellValue, index) {
      if (cellValue === 1) {
        return '已抽血'
      } else {
        return '未抽血'
      }
    },
    sex_convert: function(value) {
      if (value === '男') {
        return 1
      } else if (value === '女') {
        return 2
      } else {
        return value
      }
    },
    level_convert: function(value) {
      if (value === 'I') {
        return 1
      } else if (value === 'II') {
        return 2
      } else if (value === 'III') {
        return 3
      } else if (value === 'IV') {
        return 4
      } else {
        return value
      }
    },
    marry_convert: function(value) {
      if (value === '已婚') {
        return 1
      } else if (value === '未婚') {
        return 2
      } else {
        return value
      }
    },
    drawBlood_convert: function(value) {
      if (value === '已抽血') {
        return 1
      } else if (value === '未抽血') {
        return 2
      } else {
        return value
      }
    },
    handleClick() {
      this.show = !this.show
    },
    onCellMouseEnter(row, column, cell, event) {
      this.to = '/patient/test/tabs?id=' + row.id
    },
    add() {
      this.increment()
    },
    ...mapMutations(
      [
        'increment'
      ]
    )
  }
}
</script>

<style scoped>

</style>
